<template>
	<view style="min-height: 100vh;">
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<view></view>
				<view class="u-f-40 font-bold common-title">{{ lang_first.login }}</view>
				<view class="u-f-32" @click="jumpUrl('/pages/first/register/register')">{{ lang_first.register }}</view>
			</view>
		</view>
		
		<view>
			<view class="form-container u-m-t-90">
				<!-- 提示语 -->
				<view class="sub-title">{{ lang_first.loginTips }}</view>
				
				<!-- 手机号 -->
				<view class="font-bold" style="margin-top: 90rpx">{{ lang_first.phoneNumber }}</view>
				<view class="form-item flex-center u-m-t-20">
					<x-number-code @change="getAreaCode"></x-number-code>
					
					<!-- 手机号最长15位，以国际号码为准 -->
					<input
					v-model="form.phoneNumber"
					maxlength="15"
					style="width: 100%"
					:placeholder="lang_first.phoneNumberTips"
					@input="inputAction('phoneNumber')"/>
				</view>
				
				<!-- 密码登录 -->
				<template v-if="currentLogin === 0">
					<view class="font-bold u-m-t-56">{{ lang_first.password }}</view>
					<view class="form-item flex-center u-m-t-18">
						<input
						v-model="form.password"
						style="width: 100%"
						:placeholder="lang_first.passwordTips"/>
						
						<!-- 忘记密码 -->
						<view
						class="color-danger clear-flex"
						@click="jumpUrl('/pages/first/changePassword/changePassword')">{{ lang_first.forgetPassword }}</view>
					</view>
				</template>
				
				<!-- 验证码登录 -->
				<template v-if="currentLogin === 1">
					<view class="font-bold u-m-t-56">{{ lang_first.code }}</view>
					<view class="form-item flex-center u-m-t-18">
						<input
						v-model="form.code"
						style="width: 100%"
						:placeholder="lang_first.codeTips"
						@input="inputAction('code')"/>
						
						<view
						class="color-danger clear-flex"
						@click="getCode"
						>{{ codetips || lang_first.getCode }}</view>
					</view>
				</template>
				
				<!-- 密码和验证码切换 -->
				<view class="u-m-t-26">
					<view
					class="font-bold"
					style="width: max-content"
					@click="changeCurrentLogin">
						{{ lang_first[!currentLogin ? 'codeLogin' : 'passwordLogin'] }}
					</view>
				</view>
			</view>
		
			<!-- 提交按钮 -->
			<view
			class="flex-center-center"
			style="margin: 100rpx auto 0">
				<x-common-btn
				width="578"
				height="102"
				background="#FD1E43"
				@click="submitAction"
				:disabled="!authLogin"
				>{{ lang_first.login }}</x-common-btn>
			</view>
		</view>
		
		<!-- 验证码控件 -->
		<u-verification-code
		:seconds="seconds"
		:start-text="lang_first.getCode"
		:end-text="lang_first.twiceCode"
		:change-text="`X${ lang_unit.seconds }`"
		ref="uCode" 
		@change="codeChange"></u-verification-code>
	</view>
</template>
<script>
	import { LoginByPassword, LoginByMobileCode, SendLoginCode } from '@/api/base.js'
	import { userInfo } from '@/api/personal.js'
	import { APP_LANG } from '@/config.js'
	import areacode from '@/utils/areacode.js'
	export default {
		data() {
			return {
				areacodeObj: areacode.list[0],
				seconds: 60,
				codetips: '',
				
				// 默认是密码登录
				currentLogin: 0,
				
				// 表单
				form: {
					phoneNumber: '',
					password: '',
					code: ''
				}
			}
		},
		computed: {
			authLogin() {
				let form = this.form, currentLogin = this.currentLogin
				for (let key in form) {
					if (!form[key]) {
						if ((currentLogin === 0 && key === 'password') ||
						(currentLogin === 1 && key === 'code')) {
							return false;
						}
					}
				}
				return true
			}
		},
		methods: {
			// 处理数字
			inputAction(key = '') {
				let value = this.form[key]
				let timer = setTimeout(() => {
					this.$set(this.form, key, value.replace(/[^0-9]/ig, ""))
				}, 50)
			},
			// 响应国际区域回调函数
			getAreaCode(result = {}) {
				this.areacodeObj = result
			},
			// 切换密码和验证码登录
			changeCurrentLogin() {
				this.currentLogin = this.currentLogin === 0 ? 1 : 0
			},
			// 获取验证码
			getCode() {
				if (!this.form.phoneNumber) {
					return this.$api.msg(this.lang_first['phoneNumberTips'])
				}
				if(this.$refs.uCode.canGetCode) {
					this.$refs.uCode.start();
					SendLoginCode({ phone: this.form.phoneNumber, prefixCode: this.areacodeObj.code }).then(({ data }) => {
						this.$refs.uCode.start();
					})
				}
			},
			// 验证码变化后触发
			codeChange(e) {
				this.codetips = e
			},
			// 提交表单
			submitAction() {
				// 空值处理
				let form = this.form, currentLogin = this.currentLogin
				let { phoneNumberTips, passwordTips, codeTips } = this.lang_first
				for (let key in form) {
					if (!form[key]) {
						if ((currentLogin === 0 && key === 'password') ||
						(currentLogin === 1 && key === 'code')) {
							this.$api.msg(this.lang_first[key + 'Tips'])
							return;
						}
					}
				}
				const { phoneNumber: phone, password, code } = this.form
				const { code: prefixCode } = this.areacodeObj
				// 请求登录接口
				// 密码登录
				if (this.isClick) return;
				this.isClick = true
				if (!this.currentLogin) {
					LoginByPassword({ phone, prefixCode, password }).then((res) => {
						this.isClick = false
						this.initUserInfo(res)
					}).catch(() => { this.isClick = false })
				} else {
					LoginByMobileCode({ phone, prefixCode, code }).then((res) => {
						this.isClick = false
						this.initUserInfo(res)
					}).catch(() => { this.isClick = false })
				}
			},
			initUserInfo(res) {
				this.$store.commit('UPDATE_USER_INFO', res)
				userInfo({}).then((result) => {
					result = {...res, ...result, ...result.userExtend}
					this.$store.dispatch('initUserData')
					this.$store.commit('UPDATE_USER_INFO', result)
					this.$store.commit('BEFORE_INTO_INDEX', 'login')
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		&-navbar {
			position: relative;
			padding: 0 38rpx;
			height: 98rpx
		}
	}
	
	.login-title {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	.sub-title {
		padding: 20rpx 0 0;
		font-size: 56rpx;
		font-weight: 600;
		color: #333333;
	}
	
	.form-container {
		padding: 0 100rpx 0 80rpx;
	}
	
	.form-item {
		padding-bottom: 16rpx;
		border-bottom: 4rpx solid rgba(179, 185, 197, .2);
	}
</style>
